<template>
  <div class="goods-info">
    <div class="goods-img">
      <img v-lazy="goods.pictUrl" alt="">
    </div>
    <div class="goods-desc">
      <h3 class="g-title">{{goods.title | ginfofmt}}</h3>
      <p class="g-price"><span>现价:</span> <b>{{goods.Price}}</b></p>
      <div class="goods-count">
        <span>购买数量</span>: &nbsp;&nbsp;
        <van-stepper v-model="count" theme="round" button-size="22" disable-input />
      </div>
    </div>
    <div class="goods-other">
      <h4>商品信息</h4>
      <p>店铺: {{goods.shopTitle}}</p>
      <p>{{goods.title}}</p>
    </div>
    <!-- shop-cart -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon to="/home/cart" icon="cart-o" text="购物车" :info="totalCount" />
      <van-goods-action-icon icon="shop-o" text="店铺" info="6" />
      <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Toast } from 'vant'
export default {
  props: ['id'],
  data() {
    return {
      goods: {},
      count: 1
    }
  },
  created() {
    this.getGoodsInfo()
  },
  computed: {
    ...mapGetters({
      totalCount: 'cart/getAllCartCount'
    })
  },
  methods: {
    getGoodsInfo() {
      this.goods = this.$store.state.goods.goodsList.find(item => item.id === Number(this.id))
    },
    addCart() {
      const curGoods = {
        title: this.goods.title.substr(0, 12),
        price: parseFloat(this.goods.Price),
        pictUrl: this.goods.pictUrl,
        count: this.count,
        shopTitle: this.goods.shopTitle,
        isCompleted: true,
        id: this.goods.id
      }
      this.$store.commit('cart/SET_CART_LIST', curGoods)
      Toast('加入成功!')
    }
  }
}
</script>
<style lang="scss" >
.goods-info {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  .goods-img {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    img {
      width: 100%;
    }
  }
  .goods-desc,
  .goods-other {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .goods-desc {
    .g-price {
      margin: 10px 0;
      b {
        color: #ff2900;
      }
    }
    .goods-count {
      display: flex;
    }
  }
  .goods-other {
    line-height: 1.5;
    p {
      font-size: 12px;
      color: #888;
    }
  }
}
</style>